<template>
  <div>
    <el-col>
      <el-tag>日志信息:{{ journal.total }}</el-tag>
    </el-col>

    <el-table
        :data="journal.records"
        class="table">

      <el-table-column
          fixed="left"
          prop="username"
          label="登录用户"
          width="120"
      >
      </el-table-column>

      <el-table-column
          label="登录方式"
          width="150">
        <template slot-scope="scope">
         <el-tag>{{scope.row.style}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop="ip"
          label="登录ip"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="登录时间"
          width="200"
      >
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="danger">删除日志</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        :current-page="journal.current"
        :page-size="journal.size"
        @current-change="change"
        layout="prev, pager, next"
        :total="journal.total"
    >
    </el-pagination>

    <el-dialog
        title="删除日志"
        :visible.sync="dialogVisible"
        width="30%">
      <span>删除日志信息</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button @click="Delete">确定删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {selectJournalAll,deleteJournalById} from "../../api/journal";
// 展示用户的日志信息
export default {
  name: "index",
  data() {
    return {
      rejectVisible: false,
      journal: {},
      dialogVisible: false,
      id: ''
    }
  },
  mounted() {
    // 获取课程信息
    this.change(1)
  },
  methods: {
    // 点击删除按钮
    handleDelete(row) {
      this.id = row.id
      this.dialogVisible = true
    },

    // 删除课程
    Delete() {
      deleteJournalById(this.id).then(result => {
        this.$message({
          type: 'success',
          duration: 2 * 1000,
          message: result.data.journal
        })
        this.change(1)
      }).catch(error=>{
        this.$message({
          type: 'error',
          duration: 2 * 1000,
          message: error.message
        })
      })
      this.dialogVisible=false
    },
    change(number) {
      selectJournalAll(number).then(result => {
        this.journal = result.data.journal
      }).catch(error => {
        console.log(error)
        this.$message({
          type: "success",
          duration: 2 * 1000,
          message: error.message
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
